<template>
  <div id="app">
    <!-- <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-button type="warning">警告按钮</van-button> -->
    <RouterView />
    <van-tabbar route @change="change" active-color="#ee0a24">
      <van-tabbar-item replace to="/home">
        <div class="icon">
          <i
            class="iconfont"
            :class="changeIndex === 0 ? 'icon-icon_857' : 'icon-icon_857-copy'"
          ></i>
          <span>首页</span>
        </div>
      </van-tabbar-item>
      <van-tabbar-item replace to="/class">
        <div class="icon">
          <i
            class="iconfont"
            :class="changeIndex === 1 ? 'icon-fenlei' : 'icon-fenlei-copy'"
          ></i>
          <span>分类</span>
        </div>
      </van-tabbar-item>
      <van-tabbar-item replace to="/cart">
        <div class="icon">
          <i
            class="iconfont"
            :class="
              changeIndex === 2 ? 'icon-gouwuchekong' : 'icon-gouwuchekong-copy'
            "
          ></i>
          <span>购物车</span>
        </div>
      </van-tabbar-item>
      <van-tabbar-item replace :to="token? '/My' : '/login'">
        <div class="icon">
          <i
            class="iconfont"
            :class="
              changeIndex === 3
                ? 'icon-a-wodedefuben2'
                : 'icon-a-wodedefuben2-copy'
            "
          ></i>
          <span>我的</span>
        </div>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from "vue";

let changeIndex = ref(0);
const change = (index) => {
  console.log(index);
  changeIndex.value = index;
};

//获取token
const token = ref(localStorage.getItem("token"));

</script>

<style lang="scss" scoped>
#app {
  height: 100%;
  width: 100%;
}
::v-deep .van-tabbar-item__text {
  > .icon {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    > .iconfont {
      font-size: 50px;
    }
  }
}

</style>
